import React from "react";
import RoutesViews from "../router/RoutesViews";
import { useHistory } from "react-router-dom";
import "./index.css";

const arr = [
  {
    pathName: "/index/home",
    navName: "主页",
    key: 1,
  },
  {
    pathName: "/index/ServiceCenter",
    navName: "聊天室",
    key: 2,
  },
  {
    pathName: "/index/EmployeeCenter",
    navName: "村口",
    key: 3,
  },
  {
    pathName: "/index/CustomerManage",
    navName: "其他",
    key: 4,
  },
  {
    pathName: "/index/SystemManage",
    navName: "没想好",
    key: 5,
  },
];

function Index(props) {
  var { routes } = props;
  var history = useHistory();
  var handleClick = (item) => {
    history.push(item.pathName);
  };

  return (
    <div className="index">
      <div className="navBar">
        {arr.map((item) => {
          return (
            <div
              className="navBarItem"
              onClick={() => handleClick(item)}
              key={item.key}
            >
              <div className="textbox">{item.navName}</div>
            </div>
          );
        })}
      </div>

      {/* 二级路由渲染规则 */}
      <div className="rbox">
        <RoutesViews routes={routes}></RoutesViews>
      </div>
    </div>
  );
}

export default Index;
